<template>
  <div>
    <div class="insideBox">
      <div class="title">用户注册</div>
      <Form
        ref="formInline"
        :model="formInline"
        :rules="ruleInline"
        :label-width="70"
      >
        <FormItem prop="userName" label="用户名">
          <Input type="text" v-model="formInline.userName" placeholder="用户名">
          </Input>
        </FormItem>
        <FormItem prop="name" label="昵称">
          <Input type="text" v-model="formInline.name" placeholder="昵称">
          </Input>
        </FormItem>
        <FormItem prop="password" label="密码">
          <Input
            type="password"
            v-model="formInline.password"
            placeholder="密码"
          >
          </Input>
        </FormItem>
        <FormItem prop="gender" label="性别">
          <Select v-model="formInline.gender">
            <Option :value="0">女</Option>
            <Option :value="1">男</Option>
          </Select>
        </FormItem>
        <FormItem prop="email" label="邮箱">
          <Input v-model="formInline.email" placeholder="邮箱"> </Input>
        </FormItem>
        <FormItem prop="phone" label="手机号">
          <Input v-model="formInline.phone" placeholder="手机号"> </Input>
        </FormItem>
        <FormItem prop="typeId" label="运动">
          <Select v-model="formInline.typeId" @on-change="typeIdChange">
            <Option v-for="item in cityList" :value="item.id" :key="item.id">{{
              item.name
            }}</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSubmit('formInline')"
            >注册</Button
          >
          <Button  @click="openPage()"
            >前往登录</Button
          >
        </FormItem>
      </Form>
    </div>
  </div>
</template>
<script>
import { registerApi, getLoveListApi } from "../api/api";
import { setToken } from "@/utils/cache/cookies";
export default {
  data() {
    return {
      formInline: {
        userName: "",
        password: "",
        email: "",
        gender: 1,
        name: "",
        phone: "",
        typeId: "",
        typeName: "",
      },
      ruleInline: {
        userName: [{ required: true, message: "请输入", trigger: "blur" }],
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        password: [{ required: true, message: "请输入", trigger: "blur" }],
        email: [{ required: true, message: "请输入", trigger: "blur" }],
        phone: [{ required: true, message: "请输入", trigger: "blur" }],
        typeId: [{ required: true, type: 'number', message: "请输入", trigger: "change" }],
      },
      codeUrl: "",
      cityList: [],
    };
  },
  created() {
    this.getLoveList();
  },
  methods: {
    typeIdChange(e) {
      let ret = this.cityList.find((res) => res.id == e)
      this.formInline.typeName = ret.name;
    },
    getLoveList() {
      getLoveListApi().then((res) => {
        this.cityList = res.data;
      });
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          registerApi(this.formInline).then((res) => {
            this.$Message.success("注册成功");
            this.$router.push("/login");
          });
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    openPage() {
      this.$router.push('/login');
    },
  },
};
</script>
<style scoped>
.insideBox {
  width: 400px;
  height: 650px;
  background-color: #fff;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 50px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.title {
  font-size: 24px;
  margin: 20px;
  text-align: center;
}

.codeBox {
  width: 100px;
  height: 40px;
  border-left: 0px;
  user-select: none;
  cursor: pointer;
  text-align: center;
}
</style>
